(function ($) {
    $.fn.tips = function (data,options) {
        var defaults = {
            trigger:'hover',// click
            width: 200,
            position:'bottom',//top left right
            margin: 12
        };
        
        var title = '',content = '';
        if(typeof data == 'string'){
            content = data;
        }else{
            title = data.title||'';
            content = data.content||'';
        }
        var options = $.extend(defaults, options);
        $('.el_popover').hide();
        this.each(function () {
            var id = 'poptip_'+(new Date()).getTime();
            var element = $(this);
            if( $(this).attr('data-tooltip')){
                id = $(this).attr('data-tooltip');
                $('#'+id).show();
            }else{
                $(this).attr('data-tooltip',id);
                var top = parseFloat(element.offset().top);
                var left = parseFloat(element.offset().left);
                var height = parseFloat(element.outerHeight());
                var width = parseFloat(element.outerWidth());
                var html = '<div id="'+id+'" class="el_popover el_popover_'+(options.position)+' '+(options.class||'')+'">'+
                            '    <div class="el_popover_title">'+title+'</div>'+
                            '    <div class="el_popover_content">'+content+'</div>'+
                            '    <div class="popper_arrow"></div>'+
                            '</div>';
                $('body').append(html);
                $('#'+id).css({
                    width: options.width
                })
                var tipHeight = parseFloat($('#'+id).outerHeight());
                // var tipHeight = $('#'+id).get(0).getBoundingClientRect().height
                var tipWidth = parseFloat($('#'+id).outerWidth());
                var myPosition = switchPosition(options.position);
                $('#'+id).css({
                    left: myPosition.left,
                    top: myPosition.top,
                })
                switch(options.position){
                    case 'left':
                        $('#'+id).css({
                            top: top,
                            left: left - tipWidth - options.margin
                        });
                        $('#'+id).find('.popper_arrow').css({
                            top: height/2 - 6
                        })
                        break;
                    case 'right': 
                        $('#'+id).css({
                            top: top,
                            left: left + width + options.margin
                        });
                        $('#'+id).find('.popper_arrow').css({
                            top: height/2 - 6
                        })

                        break;
                    case 'top': 
                        $('#'+id).css({
                            top: top - tipHeight - options.margin,
                            left: left
                        });
                        $('#'+id).find('.popper_arrow').css({
                            left: width/2 - 6
                        })
                        break;
                    case 'bottom': 
                        $('#'+id).css({
                            top: top + height + options.margin,
                            left: left
                        });
                        $('#'+id).find('.popper_arrow').css({
                            left: width/2 - 6
                        })
                        break;
                }
                if(options.defaultShow){
                    $('#'+id).show();
                    // e.stopPropagation();
                }else{
                    if(options.trigger == 'hover'){
                        element.mouseover(function(e){
                            $('#'+id).show();
                            e.stopPropagation();
                        }).mouseout(function(e){
                            $('#'+id).hide();
                            e.stopPropagation();
                        });
                        $(document).not('#'+id).mouseover(function(){
                            $('#'+id).hide();
                        })
        
                    }else if(options.trigger == 'click'){
                        element.click(function(e){
                            $('#'+id).show();
                            e.stopPropagation();
                        })
                        $(document).not('#'+id).click(function(){
                            $('#'+id).hide();
                        })
                    }
                }
            }
            
            
            function switchPosition(position){
                var myPosition = {};
                switch(position){
                    case 'left': myPosition = {
                        top: top,
                        left: left - tipWidth - options.margin
                    };break;
                    case 'right': myPosition = {
                        top: top,
                        left: left + width + options.margin
                    };break;
                    case 'top': 
                    myPosition = {
                        top: top - tipHeight - options.margin,
                        left: left
                    };break;
                    case 'bottom': myPosition = {
                        top: top + height + options.margin,
                        left: left
                    };break;
                }
                return myPosition;
            }
        });
        
    };
    $.fn.hideTips = function(){
        var id = $(this).attr('data-tooltip');
        $('#'+id).hide();
    }
})(jQuery);